<template>
	<a-card class="general-card" title="课时费审计">
		<div>
			<a-steps :current="currentStep" @change="setCurrentStep">
				<a-step description="上传所需资料">资料上传</a-step>
				<a-step description="后台执行审计">执行审计</a-step>
				<a-step description="查看审计结果">审计结果</a-step>
			</a-steps>
			<div style="height: 600px; margin-top: 30px">
				<div class="m-top" v-show="currentStep === 1">
					<div>
						<span style="font-weight: bold">所需资料: </span>
						<p><span class="circle"></span> 1. 课时费报表</p>
						<p><span class="circle"></span> 2. 课程计划确认单</p>
						<p><span class="circle danger"></span> 3. 上述文件打包为zip文件，<span style="font-weight: bold">文件名必须包含上述关键字</span></p>
					</div>
					<div style="margin-top: 30px">
						<a-upload
							draggable
							:custom-request="customRequest"
							ref="uploadRef"
							style="margin: 0 auto"
							:fileList="selectedFile ? [selectedFile] : []"
							:show-file-list="false"
							:multiple="false"
						/>
					</div>
				</div>
				<div class="m-top" style="text-align: center; margin-top: 100px" v-show="currentStep === 2">
					<a-spin tip="This may take a while..." />
				</div>
				<div class="m-top" v-show="currentStep === 3">
					<a-row style="margin-bottom: 16px">
						<a-col :span="12">
							<a-space>
								<a-button type="primary" @click="exportData">
									<template #icon>
										<icon-download />
									</template>
									下载
								</a-button>
								<a-button @click="resetPage">
									<template #icon>
										<icon-refresh />
									</template>
									重置
								</a-button>
							</a-space>
						</a-col>
					</a-row>
					<a-table :pagination="true" :columns="columns" :data="records">
						<template #auditResultView="{ record }">
							<div v-if="record.auditResult === 'Y'"><span class="circle pass"></span> 通过</div>
							<div v-else-if="record.auditResult === 'N'"><span class="circle danger"></span> 未通过</div>
							<div v-else><span class="circle"></span> 需手动确认</div>
						</template>
					</a-table>
				</div>
			</div>
		</div>
	</a-card>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { FileItem, Notification } from '@arco-design/web-vue';
import { ResultEnum } from '@/enums/httpEnum';
import { uploadResources, validatesCourseFee, validatedExport } from '@/api/audit';
import { Audit } from '@/api/types';
import { fileDownload } from '@/utils';

const currentStep = ref(1);

const selectedFile = ref<FileItem>({
	uid: '',
	url: '',
});

const currentUuid = ref('');

const columns = [
	{
		title: 'id',
		dataIndex: 'id',
		width: 100,
	},
	{
		title: '检查表',
		dataIndex: 'target',
	},
	{
		title: '检查点描述',
		dataIndex: 'auditName',
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '审核结果',
		dataIndex: 'auditResult',
		slotName: 'auditResultView',
		filterable: {
			filters: [
				{
					text: '通过',
					value: 'Y',
				},
				{
					text: '未通过',
					value: 'N',
				},
				{
					text: '需手动确认',
					value: 'M',
				},
			],
			filter: (value, record) => record.auditResult == value,
			multiple: true,
		},
	},
	{
		title: '审核结果说明',
		dataIndex: 'auditDesc',
		ellipsis: true,
		tooltip: true,
	},
];

const records = ref<Audit.Course[]>([]);

const customRequest = (options: any) => {
	const { onProgress, onError, onSuccess, fileItem } = options;
	const formData = new FormData();
	formData.append('file', fileItem.file);
	currentStep.value = 2;
	uploadResources(formData)
		.then(async (res) => {
			if (res.code === ResultEnum.SUCCESS) {
				const validateRes = await validatesCourseFee(String(res.body));
				if (validateRes.code === ResultEnum.SUCCESS) {
					records.value = validateRes.body;
					currentUuid.value = String(res.body);
					currentStep.value = 3;
				}
				onSuccess();
			} else {
				Notification.error('资料上传失败');
				onError();
			}
		})
		.catch((error) => {
			currentStep.value = 1;
		});
};

const setCurrentStep = (val: number) => {
	currentStep.value = val;
};

const exportData = async () => {
	const { body } = await validatedExport(currentUuid.value);
	fileDownload(body);
};

const resetPage = () => {
	records.value = [];
	currentUuid.value = '';
	setCurrentStep(1);
};
</script>

<style scoped lang="less">
.m-top {
	margin-top: 20px;
}
.circle {
	display: inline-block;
	margin-right: 4px;
	margin-bottom: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: rgb(var(--blue-6));
	&.pass {
		background-color: rgb(var(--green-6));
	}
	&.danger {
		background-color: rgb(var(--danger-6));
	}
}
</style>
